<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title%></title>
    <link rel="SHORTCUT ICON" href="/img/html_head.png">
    <link rel="stylesheet" type="text/css" href="/css/home-blog.css">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <!--加载meta IE兼容文件-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/article.css"/>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style type="text/css">
        .form{
            width: 70%;
            margin: 0 auto;
        }
        textarea{
            resize: none;
        }
        .form legend{
            padding: 20px 0;
            /*line-height: 30px;*/
            font-family: "Microsoft YaHei UI";
            color: #435678;
            font-size: 30px;
            font-weight: 500;
            display: flex;
            justify-content: space-between;
        }
        .form legend .btn-small{
            padding: 0 10px;
            line-height: 36px;
        }
        .row{
            display: flex;
        }
        .row label{
            width: 90px;
        }
        .row input,textarea, #content{
            width: calc(100% - 90px);
        }
    </style>
</head>
<body>
    <!--  页头  -->
    <%- include('../home/header.html') -%>

   <div class="app">
       <form class="form pure-form">
           <fieldset>
               <legend>
                   <span>编辑文章</span>
                   <a class="btn-small" href="/home/home.html">返回主页</a>
               </legend>
               <input type="hidden" id="hidden-id" value="<%= article.id %>"/>
           </fieldset>
           <fieldset>
               <div class="row">
                   <label for="title">标题：</label>
                   <input id="title" type="text" aria-colspan="100" name="title" placeholder="文章标题" value="<%= article.title %>"/>
               </div>
           </fieldset>
           <fieldset>
               <div class="row">
                   <label for="description">描述：</label>
                   <textarea id="description" type="text" cols="100" rows="4" name="description" placeholder="文章描述"><%= article.description %></textarea>
               </div>
           </fieldset>
           <fieldset>
               <div class="row">
                   <label>内容：</label>
                  <!-- <textarea id="content" name="content" placeholder="文章内容"></textarea>-->
                   <div id="content">
                       <%- article.content -%>
                   </div>
               </div>
           </fieldset>
           <fieldset>
               <div class="row">
                   <label>文章类型：</label>
                   <div id="article-type">
                       <select name="category" id="category">
                           <% categoryList.forEach(item => { %>
                               <% if (article.category_id === item.id) { %>
                                   <option selected value="<%= item.id %>"><%= item.category_name %></option>
                               <% } else { %>
                                   <option value="<%= item.id %>"><%= item.category_name%></option>
                               <% } %>
                           <% })%>
                       </select>
                   </div>
               </div>
           </fieldset>
           <fieldset>
               <div class="row">
                   <label></label>
                   <div class="btn pure-button pure-button-primary">提交保存</div>
               </div>
           </fieldset>
       </form>
   </div>
    <!-- 页脚-->
    <%- include('../home/footer.html'); -%>


    <script type="text/javascript">
        const E = window.wangEditor
        // const editor = new E("#content")
        const editor = new E(document.getElementById('content'))
        // [上传服务器图片接口]配置 server 接口地址
        editor.config.uploadImgServer = '/upload-img'
        editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
        editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
        editor.config.uploadImgMaxLength = 1 // 一次最多上传 5 个图片
        // editor.config.uploadImgParams = {
        ///    Accept: 'text/x-json',
        //     token: 'xxxxx',
        //     x: 100
        // }
        // editor.txt.html('<%- article.content -%>')
        editor.config.uploadImgHooks = {
            // 上传图片之前
            before: function(xhr) {
                console.log(xhr)
                // 可阻止图片上传
                return {
                    prevent: true,
                    msg: '需要提示给用户的错误信息'
                }
            },
            // 图片上传并返回了结果，图片插入已成功
            success: function(xhr) {
                console.log('success', xhr)
            },
            // 图片上传并返回了结果，但图片插入时出错了
            fail: function(xhr, editor, resData) {
                console.log('fail', resData)
            },
            // 上传图片出错，一般为 http 请求的错误
            error: function(xhr, editor, resData) {
                console.log('error', xhr, resData)
            },
            // 上传图片超时
            timeout: function(xhr) {
                console.log('timeout')
            },
            // 图片上传并返回了结果，想要自己把图片插入到编辑器中
            // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
            customInsert: function(insertImgFn, result) {
                // result 即服务端返回的接口
                console.log('customInsert', result)

                // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                insertImgFn(result.data[0])
            }
        }
        editor.create()

        const form = document.querySelector(".form")
        const hiddenId = form.querySelector("#hidden-id")
        const title = form.querySelector("#title")
        const textContainer = form.querySelector(".w-e-text-container")
        const content = textContainer.querySelector("div")
        const description = form.querySelector("#description")
        const category = form.querySelector("#category")
        const btn = form.querySelector(".btn")
        btn.onclick = function () {
            if (title.value.trim() === ""){
                alert("标题不能为空！！！")
            } else if(content.innerHTML.trim() === "") {
                alert("文章内容不能为空！！！")
            } else if(category.value === "") {
                alert("请选择文章类型！！！")
            } else {
                const articleId = hiddenId.value
                axios.post(`/home/edit-article.do/${articleId}`,{
                    title:title.value,
                    content:editor.txt.html(),
                    description:description.value,
                    categoryId:category.value
                }).then(res => {
                    const {data:{code,message}} = res
                    if(code === 200) {
                        alert(message)
                    }
                })
            }

        }
    </script>
</body>
</html>
